<template>
  <div class="img-echars" ref="echars"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props:{
        xData:{
            type:Array,
            default:() => []
        },
        yData:{
            type:Array,
            default:() => []
        },
        
    },
  data() {
    return {
      myChart:null
    };
  },

  methods:{
    draw() {
      // 基于准备好的dom，初始化echarts实例
      if(this.myChart == null){
        this.myChart = echarts.init(this.$refs.echars);
      }
      // 绘制图表
      this.myChart.setOption({
        color: ["lightcoral", "lightgreen"],
        title: {
          text: "ECharts 入门示例",
        },
        legend: {},
        tooltip: {},
        xAxis: {
          data: this.xData,
        },
        yAxis: {},
        series: this.yData.map((item) => {
          item.type = "line";
        //   item.areaStyle = {};
        //   item.stack = "Total";
        //   item.emphasis = {
        //     focus: "series",
        //   };
          return item;
        }),
      });
    },
  },

  watch:{
    xData:{
        handler:function(){
            this.draw()
        },
        deep:true
    }
  }
};
</script>

<style lang="less" scoped>
.img-echars{
    width: 100%;
    height: 100%;
}
</style>